<template>
  <div>
    用户地址管理
    <div v-for="item in UserAddress" :key="item.addressId">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>收货地址</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="update(item)">编辑</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="save">添加地址</el-button>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="deleteAdd(item.addressId)"
          >删除地址</el-button>
        </div>
        <div>收件人:{{item.userName}}</div>
        <div>收货地址:{{item.userAddress}}</div>
        <div>收货电话:{{item.userPhone}}</div>
      </el-card>
    </div>

    <!-- 添加或修改表单 -->
    <el-dialog title="编辑表单" ref="addressForm" :visible.sync="visible">
      <el-form :model="AddressForm" label-width="100px" :rules="rules">
        <el-form-item prop="userName" label="收货人">
          <el-input v-model="AddressForm.userName"></el-input>
        </el-form-item>

        <el-form-item prop="userPhone" label="联系电话">
          <el-input type="text" v-model="AddressForm.userPhone"></el-input>
        </el-form-item>
        <el-form-item prop="userAddress" label="收货地址">
          <el-input type="text" v-model="AddressForm.userAddress"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="edit">编辑</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserAddress,
  editUserAddress,
  delUserAddress,
} from "../api/requestapi";
// 百度api
import loadBMap from "@/utils/loadBMap.js";

export default {
  name: "UserAddress",

  data() {
    return {
      //存放用户的地址
      UserAddress: [],

      //地址表单
      AddressForm: {
        //当前操纵的地址id
        addressId: "",
        userName: "",
        userAddress: "",
        userPhone: "",
      },

      //控制表单出现
      visible: false,

      //验证规则
      rules: {
        userName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        userPhone: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "格式不对",
            trigger: "blur",
          },
        ],
        userAddress: [
          { required: true, message: "地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  async mounted() {
    await loadBMap(); // 加载引入BMap，封装的js
    this.initMap(); //这个是初始化地图的方法，在method中定义
  },

  methods: {
    init() {
      getUserAddress().then((response) => {
        this.UserAddress = response.data;
      });
    },

    //更新表单
    update(item) {
      this.visible = true;
      this.AddressForm.addressId = item.addressId;
      this.AddressForm.userName = item.userName;
      this.AddressForm.userPhone = item.userPhone;
      this.AddressForm.userAddress = item.userAddress;
    },

    //添加表单
    save() {
      this.visible = true;
      this.AddressForm = {};
    },

    //编辑表单
    edit() {
      editUserAddress(this.AddressForm).then((response) => {
        if (response.code == 200) {
          this.init();
        }
      });
    },

    //删除表单
    deleteAdd(addressId) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delUserAddress(addressId).then((response) => {
            this.init();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created() {
    this.init();
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>